.header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 74px;
	background: #FFF;
	border-bottom: 1px solid #ececeb;
	z-index: 100;
	.nav-logo {
		background-image: url('../static/image/logo.png');
		height: 28px;
		width: 166px;
		position: relative;
		left: 30px;
		top: 23px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: cover;
	}
	ul.nav-right {
		position: absolute;
		right: 34px;
		top: 16px;
		height: 70px;
		color: #808080;
		font-size: 12px;
		font-weight: 700;
		display: table;
		li {
			display: block;
		}
		> li {
			display: table-cell;
			//line-height: 74px;
			cursor: pointer;
			position: relative;
			&.nav-profile {
				div {
					background-color: #FFF;
					transition:background-color 500ms ease;
				}
				&:hover {
					div {
						background-color: #f5f6f7;
					}
					ul {
						opacity: 1;
						visibility: visible;
						transform:scaleY(1);
					}
				}
			}
		}
		ul {
			opacity: 0;
			visibility: hidden;
			transform:scaleY(0);
			transform-origin:top center;
			transition:all 500ms ease;
			background: #383c40;
			text-align: center;
			position: absolute;
			top: 74px;
			width: 100%;
			a {
				color: #FFF;
				line-height: 40px;
				display: block;
			}
		}
		.nav-notification span {
			margin-right: 20px;
			line-height: 70px;
		}
		span{
			margin: 0 20px;
			font-size: 12px;
			font-weight: bold;
			color: #808080;
		}
		.nav-avatar {
			// margin-left: 20px;
			margin-right: 0px;
			width: 40px;
			height: 40px;
			display: inline-block;
			vertical-align: middle;
			border-radius:50%;
			// background-color: #CCC;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.icon-line {
			width: 0px;
			color: #ececeb;
			height: 30px;
			vertical-align: middle;
			display: inline-block;
			border-right: 1px solid #ececeb;
		}
		.icon-notification {
			position: relative;
			width: 30px;
			height: 30px;
			display: inline-block;
			vertical-align: middle;
			background-image: url(../static/image/icon-ring.png);
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			i {
				border-radius:50%;
				background-color: #E63A36;
				min-width: 15px;
				display: inline-block;
				height: 15px;
				overflow: hidden;
				line-height: 15px;
				color: #FFF;
				text-align: center;
				font-style: normal;
				position: absolute;
				top: 0;
				right: -4px;
			}
		}
		.icon-arrow {
			margin-left: 12px;
			margin-right: 12px;
		}
	}
}


// .header{
// 	position: fixed;
// 	z-index: 10;
// 	width:100%; 
// 	min-width: 1024px;
// 	height: 50px;
// 	background-color: #5847AC;
// 	.headBody{
// 		display: flex;
// 		height: 100%;
// 		line-height: 40px;;
// 		.head-left{
// 			width: 240px;
// 			color: #fff;
// 			font-size: 18px;
// 			text-align: center;
// 		}
// 		.head-right{
// 			flex:1;
// 			display: flex;
// 			.welcome{
// 				flex:1;
// 				.menu-slide{
// 					color: #fff;
// 					font-size: 28px;
// 				    vertical-align: middle;
// 				    cursor: pointer;
// 				    transition:color 0.3s;
// 					&:hover{
// 						color: $primary;
// 					}
// 				}
// 			}
// 			.logout{
// 				display: flex;
// 				cursor: pointer;
// 				.btn-c{
// 					width: 115px;
// 					height: 50px;
// 					background-image: url("/../../static/image/POWER.png");
// 					background-size: 12px 14px;
// 					background-repeat:no-repeat;
// 					background-position: 15px 18px;
// 					padding-left:20px;
// 				}
// 			}
// 		}
// 	}
// }